<template>
  <div class="noti">
    <div class="noti-item" v-for="(item,index) in notdata" :key="item.data.match_id" :style="getStyle(index, item)">
      <div class="left-section" :style="getLeft(item.data)">
        <img class="left-img" :src="goalImgSrc(item.data)"  alt="ball" />
        <!-- {{ item.data.match_id }} -->
        <div class="timer" :style="gettimer(item.data)">{{ item.data.live_time_str }}'</div>
      </div>
      <div class="right-section" :style="getRight(item.data)">
        <div class="league">{{ item.data.league_name }}-{{item.data.index}}</div>
        <div class="teams">
          <span class="team1" :style="getteam1(item.data)">{{ item.data.home_name }}</span>
          <span class="score">
            <span class="home-score" :style="gethomeScore(item.data)">{{
              item.data.score.split(":")[0]
            }}</span>
            -
            <span class="away-score" :style="getawayScore(item.data)">{{
              item.data.score.split(":")[1]
            }}</span>
          </span>
          <span class="team2" :style="getteam2(item.data)">{{ item.data.away_name }}</span>
        </div>
      </div>
      <div class="close" @click="closeNotification(item.data.match_id)">
        <img src="@/assets/table/icon-close-gray-default.png"/>
      </div>
    </div>
  </div>
</template>
<script setup>
import footballRed from "@/assets/table/img-football-red.png";
import footballBlue from "@/assets/table/img-football-blue.png";
import homeFoot from "@/assets/table/home-foot.png";
import awayFoot from "@/assets/table/away-foot.png";
const props = defineProps({
  data: Object
});

const notdata = computed(() => {
  let a = []
  if (props.data.length > 5) {
    a = props.data.slice(0, 5);
  } else {
    a = props.data
  }
  return a
})

const emit = defineEmits(['removeNotification'])
const closeNotification = (id) => {
  emit('removeNotification', id); // 通知父组件移除
};
const goalImgSrc = (item) => {
  return item.direction === "left" ? footballRed : footballBlue;
};
const getStyle = (index, item) => {
  console.log(item);
  
  setTimeout(() => {
    emit('removeNotification', item.data.match_id);
  }, 10000);
  return {
    top: `${index * 120}px`, // 偏移量：80px 高度 + 50px 间距
    position: 'absolute',
    transition: 'top 0.3s ease-in-out',
    backgroundImage: `url(${item.data.direction === "left" ? homeFoot : awayFoot})`,
    backgroundSize: 'cover',
  };
};
const gettimer = (item) => {
  if(item.direction === "left"){
    return {
        fontSize: '16px',
        color: '#e92937',
        fontWeight: 'bold',
    }
  }else{
    return {
        fontSize: '16px',
        color: '#0071ff',
        fontWeight: 'bold',
    }
  }
};
const getLeft = (item) => {
  if(item.direction === "left"){
    return {
        marginLeft: '70px',
    }
  }else{
    return {
        marginLeft: '400px',
    }
  }
};
const getRight = (item) => {
  if(item.direction === "left"){
    return {
        marginLeft: '90px',
    }
  }else{
    return {
        marginRight: '50px',
    }
  }
};
const getteam1 = (item) => {
  if(item.direction === "left"){
    return {
        color: '#e92937',
    }
  }
};
const getteam2 = (item) => {
  if(item.direction === "right"){
    return {
        color: '#0071ff',
    }
  }
};
const gethomeScore = (item) => {
  if(item.direction === "left"){
    return {
        color: '#e92937',
    }
  }
};
const getawayScore = (item) => {
  if(item.direction === "right"){
    return {
        color: '#0071ff',
    }
  }
};
onMounted(() => {
  // props.data.forEach((item) => {
  //   setTimeout(() => {
  //     closeNotification(item.KEY); // 定时移除
  //   }, 5000); // 10秒后自动关闭
  // });
});
</script>
<style lang='scss' scoped>
.noti{
    position: fixed;
    top: 12vh;
    left: 53vh;
    z-index: 100000;
}
.left-img{
    width: 65px;
    height: 65px;
}
.noti-item{
    margin-top: 50px;
    // display: flex;
    width: 530px;
    height: 75px;
    position: relative;
}
.left-section{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    margin-top: -40px;
}
.close{
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
}
.right-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.league{
    font-size: 14px;
    text-align: center;
}
.teams{
    font-size: 16px;
    display: flex;
    align-items: center;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team1{
    margin-right: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team2{
    margin-left: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>